<template>
	<div class="one-tab">
		<div class="search-row">
			<div class="block">
				<!-- HH:mm:ss  datetimerange -->
				<el-date-picker v-model="dateQuantum" value-format="yyyy-MM-dd" type="daterange" :picker-options="pickerOptions"
				 range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="right" unlink-panels>
				</el-date-picker>
			</div>
			<div class="search-btn-div">
				<el-button type="primary" @click="searchClick"><i class="el-icon-search"></i> 查询</el-button>
			</div>
		</div>
		<div class="one-sta">
			<div id="saleAmountChart" style="width: 1200px; height: 400px"></div>
		</div>
	</div>
</template>

<script>
	import statisticsTab from '../StatisticsTab.js';
	import SaleAmountService from './SaleAmountService.js';
	export default {
		name: 'SaleAmount',
		data() {
			return {
				pickerOptions: statisticsTab.pickerOptions,
				dateQuantum: [],
				xData: [],
				yDataOrigin: [],
				yDataTrue: [],
	
			}
		},
		created() {
			//初始显示一个月
			this.dateQuantum = statisticsTab.getDate();
			this.getData();
		},
		mounted() {
			this.createSaleAmountChart();
		},
		methods: {
			searchClick() {
				this.getData();
			},
			getData(){
				if(this.dateQuantum.length){
					SaleAmountService.getdateandpriceService({
						start_date: this.dateQuantum[0],
						end_date: this.dateQuantum[1]
					},res=>{
						console.log(res);
						this.xData = res.date;
						this.yDataOrigin = res.origin_price;
						this.yDataTrue = res.true_price;
						this.createSaleAmountChart();
					});
				}else{
					this.$message('请选择日期范围');
				}
			},
			createSaleAmountChart(){
				var echarts = require('echarts');
				let myChart1 = document.getElementById('saleAmountChart');
				// myChart1.style.width = window.innerWidth*0.8+'px';
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(myChart1);
				// mychart.resize();
				// 绘制图表
				myChart.setOption({
				        color: ['#003366', '#006699'],
				        tooltip: {
				            trigger: 'axis',
				            axisPointer: {
				                type: 'shadow'
				            }
				        },
				        legend: {
				            data: ['原销售额', '实际销售额']
				        },
				        toolbox: {
				            show: true,
				            orient: 'vertical',
				            right: '15',
				            top: 'center',
				            feature: {
				                mark: {show: true},
				                dataView: {show: true, readOnly: false},
				                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				                restore: {show: true},
				                saveAsImage: {show: true}
				            }
				        },
						dataZoom: [{
								show: true,
								start: 0,
								end: 100,
								handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
								handleSize: '80%',
								handleStyle: {
									color: '#fff',
									shadowBlur: 3,
									shadowColor: 'rgba(0, 0, 0, 0.6)',
									shadowOffsetX: 2,
									shadowOffsetY: 2
								}
							},
							{
								type: 'inside',
						
								start: 0,
								end: 100
							},
						],
				        xAxis: [
				            {
				                type: 'category',
				                axisTick: {show: false},
				                data: this.xData
				            }
				        ],
				        yAxis: [
				            {
				                type: 'value'
				            }
				        ],
				        series: [
				            {
				                name: '原销售额',
				                type: 'bar',
				                barGap: 0,				               
				                data: this.yDataOrigin
				            },
				            {
				                name: '实际销售额',
				                type: 'bar',				               
				                data: this.yDataTrue
				            }
				        ]
				});
			}
		},
	}
</script>

<style scoped lang="less">	
	@import "../StatisticsTab.less";
</style>
